<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>全部图书信息</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/reset.css">
    <style>
        .panel-body-books{
            padding: 0px 0 15px;
        }
        .books-main{
            width: 1400px;
            height: 40px;
            margin: 0 auto 20px;
        }
        .books-title{
            float: left;
            font-size: 16px;
            line-height: 40px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: #000000;
        }
        .buttons{
            float: right;
        }
        .buttons .btn{
            padding: 7px 8px;
            border-radius: 2px;
            border: none;
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            margin-left: 10px;
        }
        .form-inline{
            float: right;
        }
        .books-table th{
            width: 100px;
            border: none !important;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        .books-table td.books-buttons{
            display: flex;
        }
        td a{
            font-size: 0;
        }
        .btn-text{
            color: #347AE8;
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            margin-right: 10px;
        }
        .btn-text-danger{
            color: rgba(243, 92, 92, 1)
        }
        .btn-books{
            width: 48px;
            height: 26px;
            display: flex;
            font-size: 14px;
            align-items: center;
            justify-content: center;
            margin-right: 10px;
        }
        .books-table .buttons .btn-primary{
            background: #27BE93;
        }
        .books-table .buttons .btn-default{
            background: #3C84F6;
            color: white;
        }
        .books-modal{
            left: 120px;
            top: 200px;
        }
        .books-modal .modal-content{
            width: 350px;
            height: 190px;
            background: #FFFFFF;
            border-radius: 4px;
            text-align: center;
        }
        .books-modal .modal-content .title{
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: #347AE8;
            margin-top: 10px;
        }
        .books-modal .modal-content input{
            width: 280px;
            height: 40px;
            background: #FFFFFF;
            border: 1px solid #CCCCCC;
            border-radius: 4px;
            margin: 25px 0;
        }
        .books-modal .modal-content button{
            width: 82px;
            height: 30px;
            background: #347AE8;
            border-radius: 4px;
        }
        .books-page{
            margin: 0 auto;
            text-align: center;
        }
        .page-item.more a{
            cursor: default;
        }
        .page-item.more a:hover{
            background-color: white;
        }
    </style>
    <script src="js/jquery-3.2.1.js"></script>
    <script src="js/bootstrap.min.js" ></script>
    <script>
        $(function () {
            $('#header').load('admin_header.html');
        })
    </script>
</head>
<body>

<div id="header"></div>

<div class="books-main">
    <div class="books-title">图书列表</div>
    <div class="buttons">
        <a href="book_add.html?tab=0">
            <button class="btn btn-primary">添加书籍</button>
        </a>
<%--        <button class="btn btn-default">删除</button>--%>
    </div>
    <form   method="post" action="querybook.html?tab=0" class="form-inline"  id="searchform">
        <div class="input-group">
           <input type="text" placeholder="书名、作者名或ISBN" class="form-control" id="search" name="searchWord" class="form-control">
            <span class="input-group-btn">
                <input type="submit" value="搜索" class="btn btn-default" >
            </span>
        </div>
    </form>

    <script>
        $("#searchform").submit(function () {
            var val=$("#search").val();
        })
    </script>
</div>
<div style="position: fixed;z-index: 100; width: 100%; top: 10%">
<c:if test="${!empty succ}">
    <div class="alert alert-success alert-dismissable">
        <button type="button" class="close" data-dismiss="alert"
                aria-hidden="true">
            &times;
        </button>
        ${succ}
    </div>
</c:if>
<c:if test="${!empty error}">
    <div class="alert alert-danger alert-dismissable">
        <button type="button" class="close" data-dismiss="alert"
                aria-hidden="true">
            &times;
        </button>
        ${error}
    </div>
</c:if>
</div>

<!-- 模态框（Modal） -->
<div class="modal fade books-modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <div class="title">请输入读者卡号</div>
                <input type="text" class="user-id">
                <div>
                    <button type="button" class="btn btn-primary" data-dismiss="modal">确认</button>
                </div>
            </div>
        </div>
    </div>
</div>

<%--分页功能 暂时未处理--%>
<div class="panel panel-default" style="width: 1400px;margin: 0 auto;">
    <div class="panel-body panel-body-books">
        <table class="table table-hover books-table">
            <thead>
            <tr>
                <th style="width: 235px;">书名</th>
                <th style="width: 200px;">作者</th>
                <th style="width: 180px;">出版社</th>
                <th>ISBN</th>
                <th>价格</th>
                <th>剩余数量</th>
                <th style="width: 250px;">操作</th>
            </tr>
            </thead>
            <tbody>
            <c:forEach items="${books}" var="book">
            <tr>
                <td><c:out value="${book.name}"></c:out></td>
                <td><c:out value="${book.author}"></c:out></td>
                <td><c:out value="${book.publish}"></c:out></td>
                <td><c:out value="${book.isbn}"></c:out></td>
                <td><c:out value="${book.price}"></c:out></td>
                <td><c:out value="${book.number}"></c:out></td>
                <td class="books-buttons">
                    <a href="admin_book_detail.html?tab=0&bookId=<c:out value="${book.bookId}"></c:out>">
                        <span class="btn-text btn-text-info">查看</span>
                    </a>
                    <a href="updatebook.html?tab=0&bookId=<c:out value="${book.bookId}"></c:out>">
                        <span class="btn-text btn-text-info">编辑</span>
                    </a>
                    <a href="deletebook.html?bookId=<c:out value="${book.bookId}"></c:out>">
                        <span class="btn-text btn-text-danger">删除</span>
                    </a>
                    <a onclick="javascript:;" class="js-book-lend">
                        <button type="button" class="btn btn-primary btn-books">借阅</button>
                        <input type="text" hidden value="<c:out value="${book.bookId}"></c:out>">
                    </a>
                    <a onclick="javascript:;" class="js-book-return">
                        <button type="button" class="btn btn-default btn-books">归还</button>
                        <input type="text" hidden value="<c:out value="${book.bookId}"></c:out>">
                    </a>
                </td>
            </tr>
            </c:forEach>
            </tbody>
        </table>
        <nav aria-label="Page navigation example" class="books-page">
            <ul class="pagination">
                <li class="page-item">
                    <a class="page-link" href="#" aria-label="Previous">
                        <span aria-hidden="true"><</span>
                    </a>
                </li>
                <li class="page-item"><a class="page-link" href="querybook.html?tab=0&page=1">1</a></li>
                <li class="page-item"><a class="page-link" href="querybook.html?tab=0&page=2">2</a></li>
                <li class="page-item"><a class="page-link" href="querybook.html?tab=0&page=3">3</a></li>
                <li class="page-item more"><a class="page-link" href="javascript:;">...</a></li>
                <li class="page-item"><a class="page-link" href="querybook.html?tab=0&page=20">20</a></li>
                <li class="page-item">
                    <a class="page-link" href="#" aria-label="Next">
                        <span aria-hidden="true">></span>
                    </a>
                </li>
            </ul>
        </nav>
    </div>
</div>
<script>
    $(".js-book-lend, .js-book-return").click(function () {
        // $('.user-id').val('');
        $("#myModal").modal({
            show: true
        })
    })
</script>
</body>
</html>
